<template>
	<view>
		<view class="orderlist" v-for="item in setlist" :key="item.orderid">
			<view class="order-item" @click="gotoinfo">
				<!-- 标题 -->
				<view class="item-header">
					<view class="item-od">订单编号：<text>{{item.orderid}}</text> <text class="tn-icon-copy"></text></view>
					<view v-if="item.type==1" class="item-type">等待上门服务</view>
					<view v-if="item.type==2" style="color: #28ec88;" class="item-type">服务中</view>
					<view v-if="item.type==3" style="color: #3d7eff;" class="item-type">已结束</view>
				</view>
				<!-- 内容 -->
				<view class="order-content">
					<tn-avatar size="xl" shape="square"
						src="https://ui.yunchencloud.cn/anmo/static/image/project/project-1.jpg"></tn-avatar>
					<view class="content-text">
						<view class="content-title">{{item.title}}</view>
						<view class="content-describe">{{item.describe}}</view>
						<view class="content-describe">{{item.duration}}</view>
					</view>
					<text class="price">
						￥<text>298</text>
					</text>
				</view>
				<!-- 时间 -->
				<view class="order-buttom">
					<view class="date">
						2024-06-11 19:25:03
					</view>
					 <view>
						  
						 <tn-button v-if="item.type==1" size="sm" shape="round" backgroundColor="tn-main-gradient-indigo	" fontColor="tn-color-white">开始服务</tn-button>
						 <tn-button v-if="item.type==1" size="sm" shape="round" backgroundColor="tn-main-gradient-red--reverse" fontColor="tn-color-white">终止订单</tn-button>
						 <tn-button v-if="item.type==2" size="sm" shape="round" backgroundColor="tn-main-gradient-teal" fontColor="tn-color-white">服务完成</tn-button>
						 </view>
				</view>
		
			</view>
		</view>
		<Loading v-if="pageLoading"/>
	</view>
</template>

<script>

	export default {
		name:"list",
		
		data() {
			return {
				pageLoading:true,
				overalltype:0,
				orderlist1:[
					{
						orderid:989823120521561,
						url:'https://ui.yunchencloud.cn/anmo/static/image/project/project-1.jpg',
						title:'十里春风',
						describe:"伸展肌肉,舒经活络",
						date:'2023-12-05 19:25:31',
						duration:'60分钟',
						//1:待上门，2服务中，3已结束
						type:1
						
					},
					{
						orderid:989823120521561,
						url:'https://ui.yunchencloud.cn/anmo/static/image/project/project-1.jpg',
						title:'十里春风',
						describe:"伸展肌肉,舒经活络",
						date:'2023-12-05 19:25:31',
						duration:'120分钟',
						//1:待上门，2服务中，3已结束
						type:2
						
					},
					{
						orderid:989823120521561,
						url:'https://ui.yunchencloud.cn/anmo/static/image/project/project-1.jpg',
						title:'十里春风',
						describe:"伸展肌肉,舒经活络",
						date:'2023-12-05 19:25:31',
						duration:'60分钟',
						//1:待上门，2服务中，3已结束
						type:3
						
					}
				],
				
				
				
			};
		},
		computed:{
			setlist(){
				this.pageLoading=true
				if(!this.overalltype){
					
					setTimeout(p=>{
						this.pageLoading=false
						
					},1500)
					return this.orderlist1
				}else{
					setTimeout(p=>{
					
						return this.orderlist1
					},1500)
					return this.orderlist1.filter(item=>item.type==this.overalltype)
					
				}
				
			}
		},
		methods:{
			gotoinfo(){
				uni.navigateTo({
					url:'/pages/orderdetail/orderdetail'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
	// 订单列表相关
	.orderlist {
		.order-item {
			margin-top: 32rpx;
			box-shadow: 0 .3125rem 1.875rem -.59375rem #0000001a;
			padding: 32rpx 22rpx;
	
			.item-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
			
	
				.item-od {}
	
				.item-type {
					color: #ff7043;
	
				}
				.tn-icon-copy{
					margin-left: 15rpx;
				}
			}
	
			.order-content {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				line-height: 1.5;
	
				.content-text {
					margin-left: 20rpx;
					flex: 5;
					
	
					.content-title {
						font-weight: bold;
	
	
					}
	
					.content-describe {
						font-size: 28rpx;
						color: #aaaaaa;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical !important;
					}
	
				}
			}
	
			.price {
				color: #e83a30;
				flex: 1;
				font-weight: bold;
			}
			.date{
				font-size: 28rpx;
				color: #aaaaaa;
				margin-top: 20rpx;
				
			}
			.order-buttom{
				    display: flex;
				    flex-direction: row;
				    align-items: center;
				    justify-content: space-between;
					.tn-btn{
						margin-left: 10rpx;
					}
			}
		}
	
	}

</style>